<template>
  <div id="timeLinePage" @wheel="handleWheel">
    <div class="timeline-container" :style="{ transform: `translateY(${offsetY}px)` }">
      <a-typography-title :level="2" class="timeline-title">开发历程</a-typography-title>
      <a-typography-paragraph class="timeline-subtitle">记录每一个重要的里程碑</a-typography-paragraph>

      <div class="timeline">
        <div
            v-for="(item, index) in timelineData"
            :key="index"
            class="timeline-item"
            :class="{ 'active': currentIndex === index }"
            @click="setCurrentIndex(index)"
        >
          <div class="timeline-dot" :style="{ backgroundColor: colors[index % colors.length] }"></div>
          <div class="timeline-content">
            <div class="timeline-date">{{ item.date }}</div>
            <div class="timeline-event">{{ item.event }}</div>
            <div class="timeline-desc">{{ item.description }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="scroll-hint" v-if="showScrollHint">
      <a-typography-text type="secondary">滚动鼠标浏览时间轴</a-typography-text>
      <down-outlined class="hint-icon" />
    </div>

    <div class="progress-indicator">
      <div
          v-for="(item, index) in timelineData"
          :key="'indicator-' + index"
          class="indicator-dot"
          :class="{ 'active': currentIndex === index }"
          :style="{ backgroundColor: colors[index % colors.length] }"
          @click="setCurrentIndex(index)"
      ></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';

interface TimelineItem {
  date: string;
  event: string;
  description: string;
}

const timelineData: TimelineItem[] = [
  {
    date: '2025年1月1日',
    event: '项目启动',
    description: '网站开发工作正式启动，确定基本架构和技术栈'
  },
  {
    date: '2025年1月25日',
    event: '图库系统完成',
    description: '基本图库系统开发完成，支持图片浏览、下载和上传功能'
  },
  {
    date: '2025年2月9日',
    event: '个人空间上线',
    description: '增加个人空间功能，用户可以存储和管理自己的照片'
  },
  {
    date: '2025年2月28日',
    event: '团队空间发布',
    description: '新增团队空间功能，支持团队成员管理和协作'
  },
  {
    date: '2025年4月30日',
    event: '1.0正式版发布',
    description: '平台1.0系统正式上线，提供稳定可靠的服务'
  },
  {
    date: '2025年5月10日',
    event: '邮箱验证注册',
    description: '增加邮箱验证码注册功能，提升账户安全性'
  },
  {
    date: '2025年5月17日',
    event: '开发时间轴',
    description: '新增网站时间轴功能，记录开发历程和重要更新'
  },
  {
    date: '',
    event: '更多功能开发中，敬请期待~',
    description: ''
  }
];

const colors = [
  'rgba(114, 159, 207, 0.8)',
  'rgba(181, 137, 214, 0.8)',
  'rgba(163, 190, 140, 0.8)',
  'rgba(237, 212, 0, 0.8)',
  'rgba(239, 41, 41, 0.8)',
  'rgba(252, 175, 62, 0.8)',
  'rgba(233, 185, 110, 0.8)'
];

const offsetY = ref(0);
const currentIndex = ref(0);
const showScrollHint = ref(true);
const isScrolling = ref(false);
const itemHeight = 180; // 每个时间轴项的高度

// 设置当前选中项
const setCurrentIndex = (index: number) => {
  currentIndex.value = index;
  offsetY.value = -index * itemHeight;
};

// 处理鼠标滚轮事件
const handleWheel = (e: WheelEvent) => {
  e.preventDefault();

  if (isScrolling.value) return;

  showScrollHint.value = false;
  isScrolling.value = true;

  const delta = Math.sign(e.deltaY);
  let newIndex = currentIndex.value + delta;

  // 限制索引范围
  newIndex = Math.max(0, Math.min(newIndex, timelineData.length - 1));

  if (newIndex !== currentIndex.value) {
    currentIndex.value = newIndex;
    offsetY.value = -newIndex * itemHeight;
  }

  setTimeout(() => {
    isScrolling.value = false;
  }, 500);
};

// 自动隐藏滚动提示
onMounted(() => {
  setTimeout(() => {
    showScrollHint.value = false;
  }, 3000);
});

// 键盘导航
const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'ArrowDown') {
    setCurrentIndex(Math.min(currentIndex.value + 1, timelineData.length - 1));
  } else if (e.key === 'ArrowUp') {
    setCurrentIndex(Math.max(currentIndex.value - 1, 0));
  }
};

onMounted(() => {
  window.addEventListener('keydown', handleKeyDown);
});

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown);
});
</script>

<style scoped>
#timeLinePage {
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.timeline-container {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  padding: 80px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.timeline-title {
  text-align: center;
  color: #4a4a4a;
  margin-bottom: 8px;
  font-weight: 300;
}

.timeline-subtitle {
  text-align: center;
  color: #7a7a7a;
  margin-bottom: 40px;
  font-size: 16px;
}

.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 2px;
  background: rgba(0, 0, 0, 0.1);
}

.timeline-item {
  position: relative;
  padding-bottom: 40px;
  opacity: 0.6;
  transition: all 0.3s ease;
  cursor: pointer;
}

.timeline-item.active {
  opacity: 1;
  transform: scale(1.02);
}

.timeline-item:hover {
  opacity: 0.9;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -30px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.timeline-item.active .timeline-dot {
  transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.8);
}

.timeline-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.timeline-item.active .timeline-content {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.timeline-date {
  font-weight: bold;
  color: #4a4a4a;
  margin-bottom: 8px;
  font-size: 16px;
}

.timeline-event {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
}

.timeline-desc {
  color: #666;
  line-height: 1.5;
}

.scroll-hint {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  animation: fadeInOut 3s ease-in-out;
}

.hint-icon {
  display: block;
  margin: 10px auto 0;
  animation: bounce 2s infinite;
}

.progress-indicator {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot:hover {
  opacity: 0.8;
  transform: scale(1.2);
}

.indicator-dot.active {
  opacity: 1;
  transform: scale(1.3);
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}
</style>
